javascript - 使用 ExtractTextPlugin 将 SASS 转换为 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',
          }),
        ],
      },
    },
  ],
},