为什么我不能用 Webpack 编译 SASS? [英] Why am I not being able to compile SASS with Webpack?
问题描述
我的 Webpack 配置中有以下模块:
I have the following modules in my Webpack config:
module: {
preLoaders: [
{
test: /.vue$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
},
{
test: /.js$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
}
],
loaders: [
{
test: /.vue$/,
loader: 'vue'
},
{
test: /.js$/,
loader: 'babel',
include: projectRoot,
exclude: /node_modules/
},
{
test: /.json$/,
loader: 'json'
},
{
test: /.html$/,
loader: 'vue-html'
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /.scss$/,
loaders: ['style', 'css', 'sass']
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
你可以看到我正在使用 sass-loader,对于 *.scss 文件,我定义了这个管道:['style', 'css', 'sass']
.
You can see that I am using sass-loader, and for *.scss files I am defining this pipeline: ['style', 'css', 'sass']
.
然后我有我的 scss 文件:
Then I have my scss file:
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
(...)
最后,我有了导入该 scss 文件的 HTML 页面(在 vue.js 的 VUE 文件中):
Finally I have my HTML page (in a VUE file from vue.js) which imports that scss file:
<script>
require('./styles/main.scss')
(...)
</script>
但不知何故,我在启动项目时收到此错误:
ERROR in ./~/css-loader!./~/sass-loader!./~/style-loader!./~/css-loader!./~/sass-loader!./src/styles/main.scss
Module build failed:
html {
^
Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
in /Users/td/uprank/src/styles/main.scss (line 1, column 1)
@ ./src/styles/main.scss 4:14-247 13:2-17:4 14:20-253
为什么管道出错了?(看起来 webpack 正在尝试处理 ['css', 'sass', 'style', 'css', 'sass']
而不仅仅是 ['style', 'css', 'sass']
在模块中配置.
Why is it getting the pipeline wrong? (It appears webpack is trying to process ['css', 'sass', 'style', 'css', 'sass']
instead of just ['style', 'css', 'sass']
as configured in modules.
我做错了什么?
谢谢!
完整示例项目的链接:https://dl.dropboxusercontent.com/u/1066659/dummy.zip
推荐答案
发生这种情况的原因,是因为 Vue 自动为 CSS、SASS/SCSS、Stylus 生成加载器配置.
The reason this is happening, is because Vue automatically generates loader configurations for CSS, SASS/SCSS, Stylus.
(参见 projectRoot/build/utils.js
行 ~10 到 ~50)
(See projectRoot/build/utils.js
lines ~10 through ~50)
所以您看到错误是因为您有一个 webpack 加载器尝试导入文件,然后 Vue 尝试导入(已加载)文件.所以你可以把你的加载器链看作 sass ->css ->风格 ->sass ->css ->vue风格
So you're seeing the error because you have a webpack loader that is attempting to import the file and then Vue is attempting to import the (already loaded) file. So you can think of your loader chain as sass -> css -> style -> sass -> css -> vue-style
为了解决这个问题,你必须去掉你添加的加载器:
In order to resolve this issue you have to get rid of the loader that you added:
{
test: /.scss$/,
loaders: ['style', 'css', 'sass']
},
并且只依赖提供的加载器.
and just rely on the provided loader.
您可以通过以下两种方式之一加载样式表:
You can load your stylesheet in one of two ways:
注意:您必须使用 scss
而不是 sass
,因为 sass
将尝试使用缩进语法而不是括号语法.
NOTE: You MUST use
scss
instead ofsass
, assass
will attempt to parse your stylesheet using the indented syntax instead of the bracket syntax.
1:
<style lang="scss">
@import './styles/main.scss
</style>
2:
<style src="./styles/main.scss"></style>
这两个都将导入样式表,后者只会阻止您向组件添加任何其他样式.
Both of these will import the stylesheet, the latter just prevents you from adding any additional styling to the component.
这篇关于为什么我不能用 Webpack 编译 SASS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!