Question

我正在尝试通过webpack.config文件（Webpack 4）将scss文件全局导入到我的所有vue组件中，因此不需要手动导入它们。我在使用vue-cli时发现了很多示例，但是我们没有使用vue-cli，而且我似乎无法使其工作。我尝试在sass-resources-loader和vue-loader下添加sass-loader，但运气不好。我希望有人可以伸出援手。

Vue CLI way, (can't use)

Post from Reddit that I tried

我总是收到找不到我的mixins的错误。当我手动将它们导入每个组件时，它们可以正常工作。

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
            sass: ['vue-style-loader', 'css-loader', {
                loader: 'sass-loader',
                options: {
                    indentedSyntax: true
                }
            }, {
                loader: 'sass-resources-loader',
                options: {
                    resources: path.join(__src, './scss/global/mixins/mixins.scss')
                }
            }],
            scss: ['vue-style-loader', 'css-loader', 'sass-loader', {
                loader: 'sass-resources-loader',
                options: {
                    resources:path.join(__src, './scss/global/mixins/mixins.scss')
                }
            }]
        }
        // other vue-loader options go here
    }
}

也在vue Loader下尝试

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        scss: ['vue-style-loader', 'css-loader', 'sass-loader', {
          loader: 'sass-resources-loader',
          options: {
            resources: path.resolve(__dirname, '../src/scss/global/mixins/mixins.scss')
          }
        }]
      }
    }
  },

来自sass-resource loader文档

{
    test: /\.vue$/,
    use: 'vue-loader'
  },
  {
    test: /\.css$/,
    use: [
      { loader: 'vue-style-loader' },
      { loader: 'css-loader', options: { sourceMap: true } },
    ]
  },
  {
    test: /\.scss$/,
    use: [
      { loader: 'vue-style-loader' },
      { loader: 'css-loader', options: { sourceMap: true } },
      { loader: 'sass-loader', options: { sourceMap: true } },
      { loader: 'sass-resources-loader',
        options: {
          sourceMap: true,
          resources: path.resolve(__dirname, '../src/scss/global/mixins/mixins.scss')
        }
      }
    ]
  }

在没有vue-cli

0 个答案: