SASS в CSS с ExtractTextPlugin

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