我的 .scss 文件出现 Vue.js webpack sass-loader 问题

Posted 2023-02-22

【中文标题】我的 .scss 文件出现 Vue.js webpack sass-loader 问题

【英文标题】：Vue.js webpack sass-loader issue with my .scss file

【发布时间】：2018-09-11 13:56:09

【问题描述】：

我正在使用文档中所述的 style-loader、node-sass、sass-loader 包。 我在我的 webpack.base.conf.js 中添加了以下模块规则

  
    test: /\.(s?)css$/,
    use: ['style-loader','css-loader','sass-loader']
  ,

在我的 ma​​in.js 中，我导入了我的 .scss 文件

 import 'element-ui/lib/theme-chalk/index.css' // Theme UI
import './assets/scss/index.scss' // Customize UI

但是在构建阶段我得到一个错误，因为主题 css 被加载但是然后

error  in ./src/assets/scss/index.scss
 Module build failed:
 @import './globals/index.scss';
 ^

我不清楚如何正确处理 css 和 scss 文件...谷歌搜索时“解决方案”太多...找不到最新的

欢迎反馈

【参考方案1】：

已解决..（使用 webpack 3.6.0

webpack.base.config.js

不需要

测试：/.(s?)css$/, 使用：['style-loader','css-loader','sass-loader'] ,

所以我删除了它

在 utils.js 中，我应该有我的 css-loader

exports.cssLoaders = function (options) 
  options = options || 

  const cssLoader = 
    loader: 'css-loader',
    options: 
      sourceMap: options.sourceMap
    
  

main.js 删除了导入 ..

// import './element-ui/lib/theme-chalk/index.css' // Theme UI
// import './assets/scss/index.scss' // Customize UI

App.vue，插入@import ...

<style lang="scss">
@import "element-ui/lib/theme-chalk/index.css";
@import "./assets/scss/index.scss";
#app 

应该注意 assets/scss/.. 结构中嵌套的 @import..

src
  assets
    scss
      globals
        index.scss
          // .border-black  border: 1px solid #000; ...
      mixins
        animations
            index.scss
              // ...
        breakpoints
            index.scss
              // ...
        buttons
            index.scss
              // ...
        tables
            index.scss
              // ... 
        transitions
            index.scss
              // ...
        index.scss
          // @import 'breakpoints/index.scss'; @import 'animations/index.scss'; @import 'buttons/index.scss'; @import 'tables/index.scss'; @import 'transitions/index.scss'; ...
      vars
        colors
            index.scss
                // $bg-white: #fff; $bg-white-light: #f5f5f5; $bg-black: #000; ...
        index.scss
            // @import 'colors/index.scss';
      index.scss
        // @import 'globals/index.scss'; @import 'mixins/index.scss'; @import 'vars/index.scss';