I am using this at the moment:
{
test: /\.css$/,
exclude: config.paths.assets,
use: [
{ loader: 'vue-style-loader' },
{ loader: 'css-loader' },
],
},
placed right before sage’s CSS rules. You will need to add vue-style-loader
to your list of packages too.
This works fine just running yarn run build
but running the watcher I get this error in the console:
Uncaught SyntaxError: Unexpected token *
Which points to this line:
var content = __webpack_require__(/*! !../../../../node_modules/cache-loader/dist/cjs.js!../../../../node_modules/css-loader?{"sourceMap":true}!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/lib?{"config":{"path":"/.../web/app/themes/.../resources/assets/build","ctx":{"open":false,"copy":"images/**/*","proxyUrl":"https://localhost:3000","cacheBusting":"[name]_[hash:8]","paths":{"root":"/.../web/app/themes/...","assets":"/.../web/app/themes/..../resources/assets","dist":"/.../web/app/themes/.../dist"},"enabled":{"sourceMaps":true,"optimize":false,"cacheBusting":false,"watcher":true},"watch":["app/**/*.php","config/**/*.php","resources/views/**/*.php"],"entry":{"main":["./scripts/main.js","./styles/main.css"],"customizer":["./scripts/customizer.js"]},"publicPath":"/app/themes/.../dist/","devUrl":"https://....test","env":{"production":false,"development":true},"manifest":{}}},"sourceMap":true}!../../../../node_modules/vue-loader/lib?{}!../../../../node_modules/import-glob!../../../../node_modules/import-glob!./ContactForm.vue?vue&type=style&index=0&lang=css */ 35);
So it’s a bit strange!