使用ExtractTextPlugin转换为CSS

Question

我一直想将我的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 ]

Answer 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', }), ], }, }, ], }, 

Answer 2

要将SCSS文件转换为CSS，您可以在终端中使用以下命令进行操作：

sass example.scss newexample.css