我一直想要将我的SCCS代码处理为单独文件中的CSS,并为此进行了安装,我已经安装了ExtractTextPlugin(已经安装了css-loader,node-sass,sass-loader和style-loader)
npm install extract-text-webpack-plugin --save-dev
然后我将此代码添加到配置中:
let path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let conf = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'main.js',
publicPath: 'dist/'
},
module: {
rules: [
{test : /\.scss$/, use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})}
]
},
plugins: [
new ExtractTextPlugin('style.css')
]
};
module.exports = conf;
然后我尝试使用npm run dev
运行它:
"scripts": {
"dev": "webpack --mode development"
},
但是在此之后我得到了这个错误:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'dev' ]
2 info using npm@6.4.1
3 info using node@v10.13.0
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle webpack-learn@1.0.0~predev: webpack-learn@1.0.0
6 info lifecycle webpack-learn@1.0.0~dev: webpack-learn@1.0.0
7 verbose lifecycle webpack-learn@1.0.0~dev: unsafe-perm in lifecycle true
8 verbose lifecycle webpack-learn@1.0.0~dev: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\OSPanel\domains\webpack-learn\node_modules\.bin;C:\Users\bruce\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\local\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\cmd;C:\Program Files\Git\usr\bin;C:\Program Files\ConEmu\ConEmu\Scripts;C:\Program Files\ConEmu;C:\Program Files\ConEmu\ConEmu;C:\Python27;C:\Python27\Scripts;C:\ProgramData\Boxstarter;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Windows\System32\OpenSSH;C:\Program Files (x86)\ATI Technologies\ATI.ACE\Core-Static;C:\Program Files\Git\cmd;C:\Program Files (x86)\Skype\Phone;C:\Program Files\Microsoft VS Code\bin;C:\OSPanel\php;C:\PHP-5.5-x64;C:\ProgramData\ComposerSetup\bin;C:\PHP-7.2;C:\php;C:\HashiCorp\Vagrant\bin;C:\Program Files\PuTTY;D:\sync;C:\Program Files\MATLAB\R2018b\bin;C:\Program Files\MATLAB\R2014b\runtime\win64;C:\Program Files\MATLAB\R2014b\bin;C:\Program Files\MATLAB\R2014b\polyspace\bin;C:\Program Files\nodejs;C:\ProgramData\chocolatey\bin;C:\Users\bruce\AppData\Local\Microsoft\WindowsApps;C:\Users\bruce\AppData\Roaming\Composer\vendor\bin;C:\Users\bruce\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\bruce\AppData\Local\atom\bin;C:\Users\bruce\AppData\Roaming\npm;C:\Program Files\Git\usr\bin\vendor_perl;C:\Program Files\Git\usr\bin\core_perl
9 verbose lifecycle webpack-learn@1.0.0~dev: CWD: C:\OSPanel\domains\webpack-learn
10 silly lifecycle webpack-learn@1.0.0~dev: Args: [ '/d /s /c', 'webpack --mode development' ]
11 silly lifecycle webpack-learn@1.0.0~dev: Returned: code: 1 signal: null
12 info lifecycle webpack-learn@1.0.0~dev: Failed to exec dev script
13 verbose stack Error: webpack-learn@1.0.0 dev: `webpack --mode development`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:182:13)
13 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:182:13)
13 verbose stack at maybeClose (internal/child_process.js:962:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
14 verbose pkgid webpack-learn@1.0.0
15 verbose cwd C:\OSPanel\domains\webpack-learn
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
18 verbose node v10.13.0
19 verbose npm v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error webpack-learn@1.0.0 dev: `webpack --mode development`
22 error Exit status 1
23 error Failed at the webpack-learn@1.0.0 dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
答案 0 :(得分:1)
为什么不使用style-loader
,css-loader
和postcss-loader
做它?这是一个例子
{
test: /\.scss$/,
use: [{
loader: 'style-loader' // creates style nodes from JS strings
},
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: "[name]_[local]_[hash:base64:5]"
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
modules: true,
localIdentName: "[name]_[local]_[hash:base64:5]"
} // compiles Sass to CSS
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
答案 1 :(得分:0)
要将SCSS文件转换为CSS,您可以在终端中使用以下命令进行操作:
sass example.scss newexample.css