Using Webpack 2 and sass-loader 4.11
webpack --config webpack.config.js
Here is my webpack.config.js
var path = require('path');
var sass = require("./sass/lifeleveler.scss");
module.exports = {
entry: './dist/main.js',
output: {
filename: 'lifeleveler.app.js',
path: path.resolve(__dirname, 'dist')
},
watch: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
ignored: /node_modules/
},
module: {
loaders: [
{
test: /\.scss$/,
include: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, './sass')
],
loaders: ["style-loader", "css-loader", "sass-loader"]
}
],
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
{
enforce: 'pre',
test: /\.tsx?$/,
use: "source-map-loader"
}
]
},
sassLoader: {
includePaths: [path.resolve(__dirname, "./sass")]
},
resolve: {
modulesDirectories: ['./sass'],
extensions: [".tsx", ".ts", ".js", "scss"]
},
devtool: 'inline-source-map'
};
Note when I tried this at the top of my config:
var css = require("!raw-loader!sass-loader!./sass/lifeleveler.scss");
var css = require("!css-loader!sass-loader!./sass/lifeleveler.scss");
Got this error:
Error: Cannot find module '!raw-loader!sass-loader!./sass/lifeleveler.scss'
Which is why I went with just this: var sass = require("./sass/lifeleveler.scss");
And my lifeleveler.scss file (from my SASS project starter kit):
@import "vendors/normalize"; // Normalize stylesheet
@import "vendors/reset"; // Reset stylesheet
@import "modules/base"; // Load base files
@import "modules/defaults"; // Defaults elements
@import "modules/inputs"; // Inputs & Selects
@import "modules/buttons"; // Buttons
@import "modules/layout"; // Load Layouts
@import "modules/svg"; // Load SVG
@import "modules/queries"; // Media Queries
Any finally my folder structure, do you see any glaring issues?
I found this solution here, however I added my ./sass
path to the modulesDirectories
array and still getting the error.
After more digging I also found this Github issue and solution here, but his fix didn't work for me either :(
I reproduced your issue here and was able to fix it.
First of all, you need to change your webpack configuration file. Some points:
- put yout
scss
loader insiderules
option and separate each loader into an object (like this); - get rid of the line
var sass = require("./sass/lifeleveler.scss");
at the top of the configuration. The file should be called from your entrypoint JS. In this case:dist/main.js
. At this point (before reading the config), webpack is not configured to load any stuff. That's causing the error you showed. - get rid of
sassLoader.includePaths
andresolve.modulesDirectories
, as they are not valid webpack 2 keys.
Webpack 2 configuration structure is a bit different from Webpack 1 (you can check a official migration guide here)..
The working webpack.config.js
file would be something like this:
var path = require('path');
module.exports = {
entry: './dist/main.js',
output: {
filename: 'lifeleveler.app.js',
path: path.resolve(__dirname, 'dist')
},
watch: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
ignored: /node_modules/
},
module: {
rules: [
{
test: /\.scss$/,
include: [
path.resolve(__dirname, "sass")
],
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
{
enforce: 'pre',
test: /\.tsx?$/,
use: "source-map-loader"
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js", "scss"]
},
devtool: 'inline-source-map'
};
In your main.js
, now you can require your scss file calling:
require('../sass/lifeleveler.scss'); //assuming main.js is at ./dist
Make sure you've npm installed style-loader
, css-loader
, node-sass
and sass-loader
.
Now compiles correctly!
Try this configuration to your webpack.config.js
...
module: {
rules: [
{
test: /.s?css$/,
use: ExtractTextWebpack.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoader: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: [
... // fill your config
]
}
},
{
loader: 'sass-loader',
options: {
... // fill your config
}
}
]
})
}
]
},
plugins: [
new ExtractTextWebpack({
filename: 'bundle.css'
})
]
...
This is the version of dependencies you need.
"devDependencies": {
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "beta",
"node-sass": "^4.5.0",
"postcss-loader": "^1.2.2",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^2.2.1",
}
don't forget to require your style.scss
root to your entry file.
Example:
in your ./dist/main.js
require your sass by writingrequire('../sass/liveleverer.scss')
来源:https://stackoverflow.com/questions/42058357/webpack2-not-understanding-import-statement-in-my-sass-files-how-to-compile-sa