Webpack2 不理解我的 SASS 文件中的 @import 语句(How to compile SASS with webpack2?)
Webpack2 not understanding @import statement in my SASS files (How to compile SASS with webpack2?)
Using Webpack 2 and sass-loader 4.11
webpack --config webpack.config.js
这是我的 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'
};
当我在我的配置顶部尝试这个时请注意:
var css = require("!raw-loader!sass-loader!./sass/lifeleveler.scss");
var css = require("!css-loader!sass-loader!./sass/lifeleveler.scss");
收到此错误:
Error: Cannot find module '!raw-loader!sass-loader!./sass/lifeleveler.scss'
这就是我选择这个的原因:var sass = require("./sass/lifeleveler.scss");
还有我的 lifeleveler.scss 文件 (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
最后是我的文件夹结构,你看到任何明显的问题了吗?
I found this solution here,但是我将 ./sass
路径添加到 modulesDirectories
数组,但仍然出现错误。
经过更多挖掘,我还发现了 this Github issue and solution here,但他的修复对我也不起作用 :(
尝试将此配置应用于您的 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'
})
]
...
这是您需要的依赖项版本。
"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",
}
不要忘记要求您的 style.scss
root 进入您的条目文件。
示例:
在你的 ./dist/main.js
中通过写 require('../sass/liveleverer.scss')
来要求你的 sass
我在这里重现了你的问题并且能够解决它。
首先,你需要修改你的webpack配置文件。几点:
- 将你的
scss
加载程序放入 rules
选项并将每个加载程序分隔成一个对象(如 this);
- 删除配置顶部的
var sass = require("./sass/lifeleveler.scss");
行。该文件应该从您的入口点 JS 调用。在这种情况下:dist/main.js
。此时(在读取配置之前),webpack 未配置为加载任何内容。这就是您显示的错误的原因。
- 删除
sassLoader.includePaths
和 resolve.modulesDirectories
,因为它们不是有效的 webpack 2 键。
Webpack 2 配置结构与 Webpack 1 有点不同(你可以查看官方迁移指南 here) ..
工作的 webpack.config.js
文件应该是这样的:
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'
};
在你的 main.js
中,现在你可以要求你的 scss 文件调用:
require('../sass/lifeleveler.scss'); //assuming main.js is at ./dist
确保你已经安装了 npm style-loader
、css-loader
、node-sass
和 sass-loader
.
现在可以正确编译!
Using Webpack 2 and sass-loader 4.11
webpack --config webpack.config.js
这是我的 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'
};
当我在我的配置顶部尝试这个时请注意:
var css = require("!raw-loader!sass-loader!./sass/lifeleveler.scss");
var css = require("!css-loader!sass-loader!./sass/lifeleveler.scss");
收到此错误:
Error: Cannot find module '!raw-loader!sass-loader!./sass/lifeleveler.scss'
这就是我选择这个的原因:var sass = require("./sass/lifeleveler.scss");
还有我的 lifeleveler.scss 文件 (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
最后是我的文件夹结构,你看到任何明显的问题了吗?
I found this solution here,但是我将 ./sass
路径添加到 modulesDirectories
数组,但仍然出现错误。
经过更多挖掘,我还发现了 this Github issue and solution here,但他的修复对我也不起作用 :(
尝试将此配置应用于您的 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'
})
]
...
这是您需要的依赖项版本。
"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",
}
不要忘记要求您的 style.scss
root 进入您的条目文件。
示例:
在你的 ./dist/main.js
中通过写 require('../sass/liveleverer.scss')
我在这里重现了你的问题并且能够解决它。
首先,你需要修改你的webpack配置文件。几点:
- 将你的
scss
加载程序放入rules
选项并将每个加载程序分隔成一个对象(如 this); - 删除配置顶部的
var sass = require("./sass/lifeleveler.scss");
行。该文件应该从您的入口点 JS 调用。在这种情况下:dist/main.js
。此时(在读取配置之前),webpack 未配置为加载任何内容。这就是您显示的错误的原因。 - 删除
sassLoader.includePaths
和resolve.modulesDirectories
,因为它们不是有效的 webpack 2 键。
Webpack 2 配置结构与 Webpack 1 有点不同(你可以查看官方迁移指南 here) ..
工作的 webpack.config.js
文件应该是这样的:
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'
};
在你的 main.js
中,现在你可以要求你的 scss 文件调用:
require('../sass/lifeleveler.scss'); //assuming main.js is at ./dist
确保你已经安装了 npm style-loader
、css-loader
、node-sass
和 sass-loader
.
现在可以正确编译!