Vue文件中的Sass未编译

Posted 2023-02-22

【中文标题】Vue文件中的Sass未编译

【英文标题】：Sass within Vue file not compiling

【发布时间】：2017-10-28 13:28:16

【问题描述】：

通过npm dev watch 或npm dev run 编译sass 时出现错误。

npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "development"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script 'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!     /Users/mike/code/chatroom/npm-debug.log

问题在于我在 Chat.vue 文件中编写的 sass。我对 npm 之类的前端工具没有那么丰富的经验，所以我真的不知道该尝试什么。我尝试按照此处 (https://github.com/vuejs/vue-loader/issues/363) 的说明运行 npm install sass-loader node-sass webpack --save-dev，但并没有什么不同。

文件的实际内容与 .vue 文件中的几乎所有样式内容都无关。

<style lang="scss">
    .chat 
        background-color: #fff;
        border: 1px solid #D3E0E9;
        border-radius: 3px;

        &__form 
            border-top: 1px solid #D3E0E9;
            padding: 10px;

            &-input 
                width:
                border: 1px solid #D3E0E9;
                padding: 5px 10px;
                outline: none;
            

            &-helptext 
                color: #aaa;
            
        
    
</style>

NPM 版本 3.10.10 节点版本 6.9.5

我的 webpack-dev-server/client/webpack.config.js 文件如下；

module.exports = 
    module: 
        rules: [
            
                test: /\.pug$/,
                use: [
                    "pug-loader?self",
                ]
            ,
            
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ],
            
        ]
    
;

【问题讨论】：

github.com/vuejs/vue-loader/issues/363#issuecomment-297196238 和 vuejs-templates.github.io/webpack/pre-processors.html 呢？？

你能发布你的 webpack 配置文件吗？

@TinusWagner 完成

【参考方案1】：

见https://vue-loader.vuejs.org/en/configurations/pre-processors.html

  test: /\.vue$/,
  loader: 'vue-loader',
  options: 
    loaders: 
      scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
    
  

还包括一个 SCSS 规则

  test: /\.s(a|c)ss$/,
  use: [
    "style-loader",
    "css-loader",
    "sass-loader"
  ]

【讨论】：

没有区别

如果您还没有，请使用 ['style-loader', 'css-loader', 'sass-loader'] 为 .sass 和 .scss 文件添加新规则。

怎么样？我不知道语法

已更新。尝试在您的规则下添加 SASS/SCSS 规则。

【参考方案2】：

npm install --save-dev sass-loader style-loader css-loader

也许，你还没有安装'style-loader'和'css-loader'

【讨论】：

没有区别