Webpack 3:使用 sass-loader 和 ExtractTextPlugin 不起作用
Webpack 3: Use sass-loader and ExtractTextPlugin doesn't work
我一直在尝试在 webpack 中使用 sass-loader 并且我按照此说明进行操作 -> https://github.com/webpack-contrib/extract-text-webpack-plugin#extracting-sass-or-less 但这不起作用。
有人可以帮我吗?
存储库
https://github.com/gpincheiraa/boolean-html-js-exercises/tree/dev
错误
ERROR in Error: Child compilation failed:
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
- Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
依赖项
node v6.11.1
npm 5.3.0
├── babel-cli@6.26.0
├── babel-loader@7.1.2
├── babel-plugin-transform-class-properties@6.24.1
├── babel-polyfill@6.26.0
├── babel-preset-es2015@6.24.1
├── babel-preset-stage-3@6.24.1
├── css-loader@0.28.7
├── extract-text-webpack-plugin@3.0.0
├── html-loader@0.5.1
├── html-webpack-plugin@2.30.1
├── markdown-loader@2.0.1
├── node-sass@4.5.3
├── sass-loader@6.0.6
├── style-loader@0.18.2
├── webpack@3.5.6
└── webpack-dev-server@2.7.1
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: [
"./index.js"
],
output: {
path: __dirname + "/dist",
filename: "index.bundle.js"
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
{ test: /\.md$/, loaders: [ "html-loader", "markdown-loader" ] },
{ test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin('style.css'),
new HtmlWebpackPlugin({
template: 'index.html',
inject: 'body'
})
],
devtool: "eval-source-map",
devServer: {
filename: "index.bundle.js",
contentBase: "./",
port: 3000,
publicPath: "/",
stats: {
colors: true
}
}
};
问题来自 commented style code in your index.html
. The index.html
is processed by the html-webpack-plugin
and for some reason it still tries to process the require calls (line 9 and line 11)。原因可能是 html-webpack-plugin
.
的自定义 EJS 加载器
最简单的解决方案是完全删除 index.html
中的注释代码。
通过导入 .scss
文件,您配置的规则将应用于它。但似乎实际的 extract-text-webpack-plugin
实例在该过程中不可用。您在这些 require 调用中使用了内联加载程序,但您配置的规则仍将应用于该加载程序。为了防止应用其他加载器,您可以在导入前加上 !
.
来自webpack documentation - Rule.enforce
:
All normal loaders can be omitted (overridden) by prefixing !
in the request.
All normal and pre loaders can be omitted (overridden) by prefixing -!
in the request.
All normal, post and pre loaders can be omitted (overridden) by prefixing !!
in the request.
为了能够在 HTML 中正确使用 CSS,您还需要在 sass-loader
之后使用 css-loader
,因为 EJS 需要 JavaScript在这个地方,不是裸CSS。要求将变为:
<%= require("!css-loader!sass-loader!\./sass/index.scss") %>
最好在您的实际应用程序中导入 index.scss
而不是 html-webpack-plugin
使用的模板。
我来这里是因为我使用 Webpack 3 + Sass + React 的配置也不起作用。
但是,就我而言,问题非常愚蠢。我必须说我使用 create-react-app
工具创建了项目,它设置了一个 webpack.config.dev.js
文件,其中包含一个安静的 complex/complete 配置。
问题是我添加了 sass
规则 AFTER exclude
并且它在评论中清楚地表明(哈哈)每个装载机之后一个就不行了。
所以它现在看起来像这样并且有效:
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [require.resolve('css-loader'), require.resolve('sass-loader')],
})
},
{
exclude: [/\.js$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
希望这对以后的人有所帮助。
我一直在尝试在 webpack 中使用 sass-loader 并且我按照此说明进行操作 -> https://github.com/webpack-contrib/extract-text-webpack-plugin#extracting-sass-or-less 但这不起作用。
有人可以帮我吗?
存储库
https://github.com/gpincheiraa/boolean-html-js-exercises/tree/dev
错误
ERROR in Error: Child compilation failed:
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
- Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
依赖项
node v6.11.1
npm 5.3.0
├── babel-cli@6.26.0
├── babel-loader@7.1.2
├── babel-plugin-transform-class-properties@6.24.1
├── babel-polyfill@6.26.0
├── babel-preset-es2015@6.24.1
├── babel-preset-stage-3@6.24.1
├── css-loader@0.28.7
├── extract-text-webpack-plugin@3.0.0
├── html-loader@0.5.1
├── html-webpack-plugin@2.30.1
├── markdown-loader@2.0.1
├── node-sass@4.5.3
├── sass-loader@6.0.6
├── style-loader@0.18.2
├── webpack@3.5.6
└── webpack-dev-server@2.7.1
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: [
"./index.js"
],
output: {
path: __dirname + "/dist",
filename: "index.bundle.js"
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
{ test: /\.md$/, loaders: [ "html-loader", "markdown-loader" ] },
{ test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin('style.css'),
new HtmlWebpackPlugin({
template: 'index.html',
inject: 'body'
})
],
devtool: "eval-source-map",
devServer: {
filename: "index.bundle.js",
contentBase: "./",
port: 3000,
publicPath: "/",
stats: {
colors: true
}
}
};
问题来自 commented style code in your index.html
. The index.html
is processed by the html-webpack-plugin
and for some reason it still tries to process the require calls (line 9 and line 11)。原因可能是 html-webpack-plugin
.
最简单的解决方案是完全删除 index.html
中的注释代码。
通过导入 .scss
文件,您配置的规则将应用于它。但似乎实际的 extract-text-webpack-plugin
实例在该过程中不可用。您在这些 require 调用中使用了内联加载程序,但您配置的规则仍将应用于该加载程序。为了防止应用其他加载器,您可以在导入前加上 !
.
来自webpack documentation - Rule.enforce
:
All normal loaders can be omitted (overridden) by prefixing
!
in the request.All normal and pre loaders can be omitted (overridden) by prefixing
-!
in the request.All normal, post and pre loaders can be omitted (overridden) by prefixing
!!
in the request.
为了能够在 HTML 中正确使用 CSS,您还需要在 sass-loader
之后使用 css-loader
,因为 EJS 需要 JavaScript在这个地方,不是裸CSS。要求将变为:
<%= require("!css-loader!sass-loader!\./sass/index.scss") %>
最好在您的实际应用程序中导入 index.scss
而不是 html-webpack-plugin
使用的模板。
我来这里是因为我使用 Webpack 3 + Sass + React 的配置也不起作用。
但是,就我而言,问题非常愚蠢。我必须说我使用 create-react-app
工具创建了项目,它设置了一个 webpack.config.dev.js
文件,其中包含一个安静的 complex/complete 配置。
问题是我添加了 sass
规则 AFTER exclude
并且它在评论中清楚地表明(哈哈)每个装载机之后一个就不行了。
所以它现在看起来像这样并且有效:
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [require.resolve('css-loader'), require.resolve('sass-loader')],
})
},
{
exclude: [/\.js$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
希望这对以后的人有所帮助。