sass-loader

问题 I am trying to compile my Sass via webpack. Compiling normal sass is fine but I get an error. Module not found: Error: Can't resolve '../img/twitter.svg' in '/Users/Steve/mywebsite/scss' @ ./~/css-loader!./~/sass-loader/lib/loader.js!./scss/main.scss 6:94501-94530 Is there a way to resolve this? Alternatively is there a way to set the level of the sass compiler to be less strict to just ignore certain errors Below is my current config. var webpack = require('webpack'); var path = require(

问题 Webpack + file-loader + sass-loader is having trouble resolving relative paths for CSS background images. The compiled SCSS file contains a path to the background image that is relative to /dist/ instead of relative to the SCSS/CSS document. I researched this problem; sass-loader recommends using resolve-url-loader (with source maps). However, adding the resolve-url-loader made no difference to the compiled CSS. I have been able to resolve the issue by setting the 'publicPath' to '../..' on

问题 I'm building a react app and im using webpack 3 with css/sass loaders + the ExtractTextPlugin to compile my styles and generate main.css. All my scss variables, mixins and partials are compiling into one single main.css file, but my problem is that im getting duplicate classes in main.css . I have a main.scss where I import all of my variables, mixins and partials. Im also using the underscore prefix for all of my partials, variables etc. I cant figure out what the problem is! webpack.config

问题 In my project I'm including one CSS file and one SCSS file: require('./../vendor/glyphicons/glyphicons.css'); require('./../css/main.scss'); Source map for CSS - works fine : { test: /\.css$/, loader: ExtractTextPlugin.extract({ loader: ['css-loader?sourceMap'] }) } Source map for SCSS - broken (all rules point to same line, to parent element - body ) { test: /\.scss$/, loader: ExtractTextPlugin.extract({ loader: ['css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap'] }) } EDIT :

问题 I am new to nodejs and get a problem when trying to use sass with it. The following information is just fictional, but it represents the actual condition. THE SCENARIO: I have the following folder structure: frontend/ - scss/ - style.scss - main.js webpack.config.js Goal : I want to compile the style.scss to style.css using webpack and put it inside dist/frontend/css/ directory, so it should be resulting this path: dist/frontend/css/style.css and create the following folder structure: dist/ -

问题 I am trying to load a image: background: transparent url("../img/select-icon.png") no-repeat center right 8px; At my style.scss and it is not working Here is my webpack.config: function _path(p) { return path.join(__dirname, p); } module.exports = { context: __dirname, entry: [ './assets/js/index' ], output: { path: path.resolve('./assets/bundles/'), filename: '[name].js' }, devtool: 'inline-eval-cheap-source-map', plugins: [ new BundleTracker({filename: './webpack-stats.json'}), new webpack

问题 I'm currently using the below Webpack config to import and parse the SCSS imports I make in my React components. The crux of my issue is with the CSS part of the config. Currently, I'm importing SCSS files using their absolute file paths in their relevant React components. However on render, each individual CSS import gets their own <style> tag which results in a dozen <style> tags littered in the head of my web app. Is there a way to tweak the config such that the outputted CSS goes into one

问题 I've added this lines to build with sass-loader on development (local) server: nuxt.config.js module.exports = { mode: 'spa', build: { analyze: { analyzerMode: 'static', generateStatsFile: true, statsFilename: 'webpack-stats.json', openAnalyzer: false }, vendor: [ 'axios', 'vuetify' ], extend (config) { config.resolve.alias['vue'] = 'vue/dist/vue.common' const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader') vueLoader.options.loaders.scss = 'vue-style-loader!css

问题 I'm trying to enable sourceMaps in webpack but there seems to be a problem with sass-loader and postcss-loader combination. With both sass-loader and postcss-loader enabled my console shows "no source": But when I disable postcss-loader the sourceMap works fine and points to "typography" file: webpack.config.js const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { mode: 'development', entry: './src/index.js', output: { path: path

问题 Here is my directory structure: - public - src - app.js - assets - images - logo-b-green.png - stylesheets - nav.scss And: // webpack.config.js module.exports = { entry: './src/app.js', output: { path: './public', filename: 'bundle.js' }, module: { loaders: [ { test: /.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.scss$/, loaders: ['style', 'css', 'sass'] }, { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=fonts/[name].[ext]' }, { test: /\.(png|jpg|gif)$/,